{% extends 'cart-display.twig' %}



{% block cartContentsItemsList %}
    <tr>
        <td class="col1"><a class="cartImg-wrapper" href="{{ url('wine-details', { wine: oi.product.metadata.urlfragment } )}}" ><img src="{{oi.valueForKey("productInvoiceImageUrl")}}" class="cartImg" alt=""/></a> <a class="productDes" href="{{ url('wine-details', { wine: oi.product.metadata.urlfragment } )}}">{{oi.valueForKey("productInvoiceDescription")}}</a></td>
        <td class="col2">{{cart.currency}}{{cart.currencySign}}<span id="price{{ loop.index }}">{{oi.valueForKey('price')|number_format(2, '.', ',') }}</span></td>
        <td class="col3">
            <select name="quantity{{ oi.valueForKey('id') }}" id="qty{{ loop.index }}" onchange="update_cart();">
                <option value="1">Qty:</option>

                {% for i in 1..11 %}
                <option value="{{ i }}" {% if i == oi.valueForKey('quantity') %}selected="selected"{% endif %}>{{ i }}</option>
                {% endfor %}

                {% for i in 1..5 %}
                <option value="{{ i * 12 }}" {% if i*12 == oi.valueForKey('quantity') %}selected="selected"{% endif %}>{{ i }} Case{% if i > 1 %}s{% endif %}</option>
                {% endfor %}
            </select>

        </td>
        <td class="col4">{{cart.currency}}{{cart.currencySign}}<span id="subTotal{{ loop.index }}">{{oi.valueForKey('subTotal')|number_format(2, '.', ',') }}</span></td>
        <td class="col5"><a href="?deleteItemFromContainer={{ oi.valueForKey('id') }}&amp;returnUrl={{removeItemReturnUrl|url_encode}}" class="button item-remove">Remove item</a></td>
    </tr>
{% endblock %}

{% block cartContentsItemsFooterContainer  %}
    {% if (cart.orderContainer.totalItems >= 12) %}
    <tr>
        <td colspan="4" class="col4">Discount: {{cart.currency}}{{cart.currencySign}}<span>{{(cart.orderContainer.valueForKey('price') * 0.1)|number_format(2, '.', ',') }}</span></td>
        <td class="col5">&nbsp;</td>
    </tr>
    {% endif %}
    <tr>
        <td colspan="4" class="col4">Shipping: {{cart.currency}}{{cart.currencySign}}<span id="shippingCost">{{cart.orderContainer.valueForKey('shippingPrice')|number_format(2, '.', ',') }}</span></td>
        <td class="col5">&nbsp;</td>
    </tr>
{%  endblock %}


{% block cartContentsShipping %}
{% endblock %}

{% block cartContentsTotal %}
    <div class="cart-foot">
        <div class="cart-shipping-message">
            {% include "includes/shipping-notice.twig" %}
        </div>
        <div class="cart-total"><strong>Total: </strong>{{cart.currency}}{{cart.currencySign}}<span class="price" id="total">{{cart.orderContainer.valueForKey('totalPrice')|number_format(2, '.', ',') }} </span></div>
    </div>
    <script>
      function update_cart() {
    	  var total = 0;
    	  for (var i = 1, il = {{ cart.orderContainer.orderItems|length }}; i <= il; i++) {
          $('#subTotal' + i).html(($('#qty' + i + ' :selected').val() * $('#price' + i).html()).toFixed(2));
    		  total += parseFloat($('#subTotal' + i).html(), 10);
    	  }
    	  total += parseFloat($('#shippingCost').html(), 10);
    	  $('#total').html(total.toFixed(2));
    	  $('form').attr('action', '');
    	  $('form').submit();
      }
    </script>
{% endblock %}

{% block cartContentsControls %}
    <div class="control">
        <a href="?orderStep=cancelOrder" class="button clear-order">Clear your order &rsaquo;</a>
        <a href="/#Our-Wine" class="button continue-browsing">Continue browsing &rsaquo;</a>

        <ul class="anchor-nav">
            <li><a href="#Checkout" class="button checkout">Checkout &rsaquo;</a></li>
        </ul>
    </div>
{% endblock %}

{% block cartDetailsContainer %}
<div id="Checkout" class="purchase-wrapper">
{{ parent() }}
</div>
{% endblock %}



{% block cartSubmit %}

    <div class="cart-submit">
        <div class="terms">
            <ul class="nav">
                <li>
                    <div class="inputs">
	                    <input type="checkbox" class="checkbox" id="terms-agree" name="{{cart.orderContainer.keyForField('termsAgree')}}"/>
	                    <label for="terms-agree">I have read and agree to the <a href="/Terms/" class="modal fancybox.iframe">Terms &amp; Conditions</a></label>
                    </div>
                    {% if not cart.orderContainer.isKeyValid('termsAgree') %}
                        <span class="orderValidationError" > You must agree to the terms and conditions.</span>
                    {% endif %}
                </li>
                <li>
                    <input type="checkbox" class="checkbox" id="newsletter-agree" name="z9bdc0e4_termsAgree"/>
                    <label for="newsletter-agree">Sign me up to the Kumeu River email newsletter</label>
                </li>
            </ul>
        </div>
        <input type="submit" class="submit button" value="Confirm your order &rsaquo;" title="Confirm your order" />
    </div>
{% endblock %}

